<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>胖虎甄选</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 头部表单部分 -->
		<el-form style="margin-top: 30px;" :inline="true"  label-width="80px">
			<el-form-item label="商品名称">
				<el-input  clearable @clear="sousuo" v-model="zong.communityName"></el-input>
			</el-form-item>

			<!-- <el-form-item label="添加时间">
				<el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss" :disabled-date="disabledDate" align="right">
				</el-date-picker>
			</el-form-item> -->



			<el-form-item>
				<el-button type="primary" @click="sousuo">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="tianjiashangpin">添加商品</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格 -->
		<el-table :data="list" style="width: 100%">
			<el-table-column prop="communityId" label="商品ID" width="180">
			</el-table-column>
			<el-table-column prop="communityName" label="商品名字" width="180">
			</el-table-column>
			
			<el-table-column prop="communityAddress" label="原产地">
			</el-table-column>
			
		</el-table>

		<!-- 页码 -->
		<div class="block">
			<span class="demonstration">完整功能</span>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="zong.pageNum" :page-sizes="[5,10,15,20]" :page-size="zong.pageSize"
				:total='total' >
			</el-pagination>
		</div>



	</div>
</template>

<script>
		
	
	export default {
		data() {
			return {
				zong: {
					communityName: '',
					startTime:'', 
					endTime: '',
					pageNum: 1,
					pageSize: 20,
				},
				list: [],
				dateRange: '', // 绑定日期范围
				// 设置可选的开始时间和结束时间
				total:'',
			}

		},






		methods: {
				
			handleCurrentChange(){
				
			},
				
			handleSizeChange(){
				
			},
			
			sousuo() {
				this.$http.get('community/communityList', {
					param: this.zong
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.list = resp.data.data.list
						this.total=resp.data.data.total

						this.$message.success(resp.data.message)

					}

				})

			},

			tianjiashangpin() {},
			disabledDate(time) {
				// 如果设置了时间范围，则禁用不在时间范围内的日期
				const start = new Date(this.zong.startTime);
				const end = new Date(this.zong.endTime);
				return time.getTime() < start.getTime() || time.getTime() > end.getTime();
			},


		},
		mounted() {
			this.sousuo()
		},






	}
</script>

<style>
</style>